{% load static %}
{% load permission_tags %}

<div class="user_group_mgr" data-tab-id="user_group_mgr">
<div class="user_group_mgr_son" data-tab-id="user_group_mgr_son">
<!-- 在模板中安全注入数据 -->
{{ users|json_script:"usersData" }}
{{ groups|json_script:"groupsData" }}
{{ permissions|json_script:"permissionsData" }}
<div
    class="container-fluid py-1 bg-grep text-white fixed-area"
    style="width: 85vw; margin: 0 auto; font-size: 16px;"
    data-module-root="user-group-mgr">
    <div class="rbac-manager container-fluid py-2">
        <div class="glassmorphism-container p-2 rounded-4 shadow-lg">
            <!-- 头部操作栏 -->
            <div class="d-flex justify-content-between align-items-center mb-2" style="height: 20px">
                <h6 class="text-success fw-bold mb-0"><i class = "bi bi-shield-lock fs-6"></i> 权限管理</h6>
                <button class="btn btn-outline-primary btn-sm fw-bold me-1" id="confirmBtn" style="font-size: calc(1rem * 0.75);">
                    <i class="bi bi-save me-1"></i>确认配置
                </button>
            </div>

            <!-- 三栏布局 -->
            <div class="row g-2">
                <!-- 用户列 -->
                <div class="col-12 col-lg-3">
                    <div class="card h-100 border-0 glassmorphism-card">
                        <div class="card-body">
                            <div class="search-box mb-1">
                                <input type="text"
                                       class="form-control form-control-sm search-input"
                                       placeholder="🔍 搜索用户...[回车确认]"
                                       data-search-type="user"
                                       autocomplete="off"
                                       id="userSearch">
                            </div>
                            <div class="user-list list-group list-group-flush" id="userList">
                                {% for user in users %}
                                    <div class="list-group-item d-flex align-items-center user-item"
                                         data-user-id="{{ forloop.counter0 }}"
                                         style="white-space: nowrap; overflow-x: hidden; font-size: calc(1rem * 0.95);">
                                        <div class="flex-grow-1">
                                            <div class="d-flex align-items-center">
                                                <span class="badge bg-primary me-2">用户</span>
                                                <div>
                                                    <div class="fw-bold" title="{{ user.username }} {{ user.phone }}">{{ user.username }} <small
                                                            class="text-muted">{{ user.phone }}</small></div>
                                                </div>
                                            </div>
                                        </div>
                                        <i class="bi bi-check2-circle text-primary ms-2"></i>
                                    </div>
                                {% endfor %}
                            </div>
                            <!-- 分页 -->
                            {% include 'account/partials/paging.html' %}
                        </div>
                    </div>
                </div>

                <!-- 组列 -->
                <div class="col-12 col-lg-3">
                    <div class="card h-100 border-0 glassmorphism-card">
                        <div class="card-body">

                            <div class="describe-box mb-1">
                                <label class="text-success">
                                    右边权限里图标说明:
                                </label>
                                <label class="text-success">
                                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none">
                                    <rect width="24" height="24" rx="6" fill="#0D6EFD"></rect>
                                    <path d="M8 12L11 15L16 9" stroke="white" stroke-width="3" stroke-linecap="round"></path>
                                  </svg>:私有的权限&nbsp&nbsp

                                   <svg width="15" height="15" viewBox="0 0 24 24" fill="none">
                                      <rect width="24" height="24" rx="6" fill="#90CAF9"></rect>
                                      <path d="M8 12L11 15L16 9" stroke="white" stroke-width="3"></path>
                                    </svg>:组的权限&nbsp&nbsp
                                </label>
                                <label class="text-success">
                                   <svg width="15" height="15" viewBox="0 0 24 24" fill="none">
                                       <rect width="24" height="24" rx="6" fill="#BB4444"></rect>
                                      <path d="M8 12L11 15L16 9" stroke="white" stroke-width="3"></path>
                                    </svg>:重复的组权限
                                </label>
                            </div>

                            <div class="group-list list-group list-group-flush" id="groupList"
                                 style="white-space: nowrap; overflow-x: hidden;font-size: calc(1rem * 0.95);">
                                {% for group in groups %}
                                    <div class="list-group-item d-flex align-items-center">
                                        <div class="form-check flex-grow-1">
                                            <input type="checkbox"
                                                   class="form-check-input group-checkbox"
                                                   value="{{ group.id }}"
                                                   id="group_{{ group.id }}"
                                                   name="groupList">
                                            <label class="form-check-label" for="group_{{ group.id }}">
                                                <span class="badge bg-success me-2 btn-sm">组</span>
                                                 {{ group.name }}
                                            </label>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 新权限 -->
                <div class="col-12 col-lg-6">
                    <div class="card h-100 border-0 shadow-sm" style="background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px);">
                        <div class="card-body pt-1 pb-0 d-flex flex-column">
                            {% regroup permissions|dictsort:"codename" by codename|get_permission_group as permission_groups %}
                            <div class="flex-grow-1 overflow-auto scroll-container" id="scroll-container"> <!-- 滚动容器 -->
                            <ul class="list-unstyled mb-0" style="line-height: 1.1;">
                                {% for group in permission_groups %}
                                    {% with base=group.grouper %}
                                        <!-- 一级权限 -->
                                        <li class="mb-1">
                                            <div class="form-check form-switch d-flex align-items-center gap-2">
                                                <input class="form-check-input border-2 flex-shrink-0 perm-checkbox-1" type="checkbox"
                                                    id="perm_{{ group.list.0.id }}"
                                                    value="{{ group.list.0.codename }}"
                                                    data-display-toggle=""
                                                >
                                                <label class="form-check-label fw-bold text-info" for="perm_{{ group.list.0.id }}">
                                                    <i class="bi bi-shield me-1"></i>{{ group.list.0.name }}
                                                </label>
                                            </div>
                                            <ul class="list-unstyled ps-3 mt-1">
                                                {% regroup group.list|slice:"1:" by codename|get_permission_level:1 as sub_groups %}
                                                {% for sub_group in sub_groups %}
                                                    <!-- 二级权限 -->
                                                    <li class="pt-0 d-flex align-items-center gap-2">
                                                        <div class="form-check">
                                                            <input class="form-check-input border-2 flex-shrink-0 perm-checkbox-2" type="checkbox"
                                                                id="perm_{{ sub_group.list.0.id }}"
                                                                value="{{ sub_group.list.0.codename }}"
                                                                data-display-toggle=""
                                                            >
                                                            <label class="form-check-label small fw-medium  text-black" for="perm_{{ sub_group.list.0.id }}">
                                                                <i class="bi bi-shield-shaded me-1"></i>{{ sub_group.list.0.name }}
                                                            </label>
                                                        </div>

                                                        <ul class="list-unstyled ps-2 mt-1 d-flex flex-wrap gap-1">
                                                            {% for perm in sub_group.list %}
                                                                {% if perm.codename|has_permission_level:2 %}
                                                                <!-- 三级权限 -->
                                                                <li class="list-inline-item">
                                                                    <div class="form-check form-check-inline gap-1">
                                                                        <input class="form-check-input border-2 flex-shrink-0 perm-checkbox-3" type="checkbox"
                                                                            id="perm_{{ perm.id }}"
                                                                            value="{{ perm.codename }}"
                                                                            data-display-toggle=""
                                                                        >
                                                                        <label class="form-check-label small" style="color: #6c757d;" for="perm_{{ perm.id }}">
                                                                            {{ perm.name }}  <!-- <i class="bi bi-dot me-1"></i> -->
                                                                        </label>
                                                                    </div>
                                                                </li>
                                                                {% endif %}
                                                            {% endfor %}
                                                        </ul>
                                                    </li>
                                                {% endfor %}
                                            </ul>
                                        </li>
                                    {% endwith %}
                                {% endfor %}
                            </ul>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    [data-tab-id="user_group_mgr"] .fixed-area {
        position: absolute;
        top: 45px;
        bottom: 0;
        left: 0;
        right: 0;
        overflow-y: auto; /* 支持内部滚动 */
    }

    [data-tab-id="user_group_mgr"] .glassmorphism-container {
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    [data-tab-id="user_group_mgr"] .list-group-item {
        transition: all 0.3s ease;
        border-radius: 8px !important;
        margin-bottom: 8px;
        background: rgba(255, 255, 255, 0.5);
    }

    [data-tab-id="user_group_mgr"] .list-group-item:hover {
        transform: translateX(5px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    [data-tab-id="user_group_mgr"] .search-input {
        border-radius: 20px;
        padding: 12px 20px;
        border: 1px solid rgba(0, 0, 0, 0.1);
    }

    [data-tab-id="user_group_mgr"] .search-input:focus {
        box-shadow: 0 0 0 3px rgba(92, 106, 196, 0.1);
    }

    [data-tab-id="user_group_mgr"] .badge {
        font-weight: 500;
        padding: 0.5em 0.75em;
    }

    [data-tab-id="user_group_mgr"] .active-user {
        background: rgba(13, 110, 253, 0.15) !important;
        border-left: 3px solid #0d6efd !important;
    }

    [data-tab-id="user_group_mgr"] .user-item {
        cursor: pointer;
        transition: all 0.2s ease;
    }

    [data-tab-id="user_group_mgr"] .user-item:hover {
        background-color: rgba(0, 0, 0, 0.03);
    }

    [data-tab-id="user_group_mgr"] .bi-check2-circle {
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    [data-tab-id="user_group_mgr"] .active-user .bi-check2-circle {
        opacity: 1;
    }

    [data-tab-id="user_group_mgr"] [data-source="group"] + label {
        opacity: 0.7;
        cursor: not-allowed;
    }

    [data-tab-id="user_group_mgr"] .perm-category h4 {
        border-left: 4px solid;
        padding-left: 0.5rem;
    }

    [data-tab-id="user_group_mgr"] #directPerms h4 {
        border-color: #0d6efd;
    }

    /* 蓝色 */
    [data-tab-id="user_group_mgr"] #groupPerms h4 {
        border-color: #198754;
    }

    /* 添加自定义样式 */
    [data-tab-id="user_group_mgr"] .card {
        min-height: 400px; /* 设置最小高度确保父容器有基准 */
    }

    [data-tab-id="user_group_mgr"] .scroll-container {
        flex: 1 1 auto;
        min-height: 0; /* 修复Safari浏览器的flex布局bug */
        overflow-y: auto; /* 垂直滚动 */
        -webkit-overflow-scrolling: touch; /* iOS滚动优化 */
    }


    /* 分页按钮样式优化 */
    [data-tab-id="user_group_mgr"] .total-pages {
        display: none;
    }

    [data-tab-id="user_group_mgr"] .current-total {
        color: black;
    }

    [data-tab-id="user_group_mgr"] .position-relative {
        justify-content: center;
    }

    [data-tab-id="user_group_mgr"] .pagination-btn {
        width: 25px;
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50% !important;
    }

    /* 禁用按钮样式 */
    [data-tab-id="user_group_mgr"] .pagination-btn.disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    /* 跳转输入框样式 */
    [data-tab-id="user_group_mgr"] .input-group.input-group-sm {
        width: 105px;
    }

    [data-tab-id="user_group_mgr"] #page-jump-input {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        height: 32px;
        font-size: 13px;
    }

    [data-tab-id="user_group_mgr"] #page-jump-btn {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        height: 32px;
        padding: 0 12px;
    }

    /* 响应式调整 */
    [data-tab-id="user_group_mgr"] @media (max-width: 768px) {
        .d-flex.justify-content-end {
            flex-wrap: wrap;
            justify-content: center !important;
        }
        .me-3, .btn-group, .input-group {
            margin-bottom: 10px;
        }
    }
    /* 给说明底部加暗色线 */
    [data-tab-id="user_group_mgr"] .describe-box {
        position: relative;
        padding-bottom: 3px; /* 增加底部内边距 */
        border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* 暗色线 */
    }
</style>
</div>
</div>

